/* Resumen de agenda: conserva la interfaz limpia y deja visible cuántas cosas
   hay en cada día sin ignorar los filtros que la persona haya apagado. */
.calendar-agenda-day-tab[data-calendar-day-summary],
.calendar-agenda-mobile-day[data-calendar-day-summary] {
  position: relative;
}

.calendar-day-summary-badge {
  position: absolute;
  top: .3rem;
  right: .34rem;
  z-index: 2;
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding: 0 .28rem;
  border: 1px solid color-mix(in srgb, var(--accent-deep) 70%, transparent);
  border-radius: 999px;
  /* --accent-strong es una version clara/pastel del acento (pensada para
     texto sobre fondo oscuro, no al reves) - usarla de FONDO con texto
     blanco encima daba muy poco contraste (blanco sobre celeste claro,
     por ejemplo, en la paleta "ocean"). --accent-deep es la version mas
     saturada/oscura en TODAS las paletas, ahi si el blanco se lee bien. */
  background: var(--accent-deep);
  /* !important a proposito: la insignia es un <span>, y styles.css tiene
     ".calendar-agenda-day-tab span{color:var(--muted)}" (pensada para el
     nombre del dia, MAR/MIE/...) mas otra version SOLO en modo claro
     (":root[data-mode=light] .calendar-agenda-day-tab span{color:#6b7280}")
     que junta :root + [data-mode=light] + .calendar-agenda-day-tab + span
     y termina con mas especificidad que cualquier selector de esta clase
     sola le pueda ganar sin repetir ese mismo combo. En modo claro el
     numero quedaba gris sobre este fondo azul, casi ilegible - de ahi
     "no se ven los numeros claramente". Mas simple y a prueba de futuros
     ".span{color:...}" nuevos: fijar el blanco con !important aca, ya que
     esta insignia SIEMPRE necesita texto blanco sobre su propio fondo de
     acento, sin importar el tema. */
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), .25);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
}

.calendar-agenda-mobile-day .calendar-day-summary-badge {
  top: .12rem;
  right: .1rem;
  min-width: 1.18rem;
  height: 1.18rem;
  font-size: .56rem;
}

/* "no es necesario tener ese punto... ya tenemos el + con el numero" -
   el puntito de .calendar-day-dot (5px, junto al numero) es redundante
   una vez que existe esta insignia con la cuenta exacta - se apaga solo
   ahi, sin tocar .calendar-day-dot en otros lugares donde SI sigue
   siendo el unico indicador (la grilla de mes de la vista "Calendario"). */
.calendar-agenda-day-tab strong .calendar-day-dot {
  display: none;
}

/* "el dia actual... no se ve tan claro" - el circulo de acento alrededor
   del numero competia visualmente con la insignia de arriba a la
   derecha, del mismo color. Una linea de acento abajo de toda la
   columna es una segunda señal clara, separada del badge. */
.calendar-agenda-day-tab.is-today {
  box-shadow: inset 0 -3px 0 var(--accent-strong);
}

/* El tablero no necesita una caja negra enorme alrededor: cada columna queda
   definida por sí misma, con más aire útil para tareas y arrastre. */
.task-board-shell:not(.is-list-view):not(.is-matrix-view) {
  padding: .25rem 0 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.task-board-shell:not(.is-list-view):not(.is-matrix-view) .task-board-grid {
  gap: .9rem;
}

/* "el tablero de kanban quedo superpuesto" - este min-width forzaba cada
   columna a un ancho fijo SIN importar cuantas columnas hubiera. Cuando
   son 4 o menos, styles.css ya reparte el ancho disponible en partes
   iguales para que quepan sin scroll (.task-board-grid:has(>[data-board-
   status]:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))
   !important}) - pero un min-width en el ITEM puede desbordar su propio
   track del grid igual, !important o no en el contenedor: si el track
   mide menos que este min-width, la columna simplemente se sale de su
   lugar en vez de encogerse, superponiendose con la de al lado (se
   confirmo en vivo: 4 columnas de 239px de track pero 352px de ancho
   real cada una). El :has(...:nth-child(5)) de abajo es el mismo mismo
   truco que ya usa styles.css para detectar "hay 5 columnas o mas" - el
   min-width solo tiene sentido ahi, donde el tablero SI necesita
   scroll horizontal en vez de achicarse. */
.task-board-shell:not(.is-list-view):not(.is-matrix-view) .task-board-grid:has(>[data-board-status]:nth-child(5)) .task-stage-column {
  min-width: min(22rem, calc(100vw - 2rem));
}

/* En un tablero compartido con cinco estados o más, el track debe respetar
   el mismo mínimo que la columna. Si el track quedaba en 20rem y el item en
   22rem, cada estado invadía dos rem de la columna siguiente. */
body.shared-board-tasks-open .task-board-shell:not(.is-list-view):not(.is-matrix-view) .task-board-grid:has(>[data-board-status]:nth-child(5)) {
  grid-auto-columns: minmax(22rem, 24rem);
}

@media (max-width: 700px) {
  .calendar-day-summary-badge { top: .18rem; right: .2rem; }
  .task-board-shell:not(.is-list-view):not(.is-matrix-view) .task-board-grid:has(>[data-board-status]:nth-child(5)) .task-stage-column { min-width: min(18.5rem, calc(100vw - 1.4rem)); }
}