/* Inicio: Variables de color */
:root {
  --color-none: transparent;
  --color-red: #ffb3ba;
  --color-green: #baffc9;
  --color-blue: #bae1ff;
  --color-yellow: #ffffba;
  --color-purple: #e2cbff;
  --cell-border-default: var(--fallback-bc, oklch(var(--bc) / 0.2));
  --cell-border-hover: var(--fallback-bc, oklch(var(--bc) / 0.55));
  --cell-watermark-color: var(--fallback-bc, oklch(var(--bc) / 1));
}

[data-theme="dark"] {
  --color-none: transparent;
  --color-red: #5c2025;
  --color-green: #205c2e;
  --color-blue: #20415c;
  --color-yellow: #5c5c20;
  --color-purple: #3e205c;
  --cell-border-default: var(--fallback-bc, oklch(var(--bc) / 0.24));
  --cell-border-hover: var(--fallback-bc, oklch(var(--bc) / 0.78));
}

/* Fin: Variables de color */

/* Inicio: Layout base */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.menu-bar {
  height: 2.5rem;
  min-height: 2.5rem;
}

.grid-wrapper {
  height: calc(100vh - 2.5rem);
}

table {
  table-layout: fixed;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid var(--cell-border-default);
  padding: 2px 4px;
  overflow: hidden;
  position: relative;
}

th {
  height: 1.75rem;
}

/* Fin: Layout base */

/* Inicio: Contenido de las celdas */
.cell-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1.2;
  position: relative;
  z-index: 10;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.day-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.07;
  color: var(--cell-watermark-color);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.day-cell {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.day-cell.is-draggable {
  cursor: grab;
}

.day-cell.is-dragging {
  opacity: 0.6;
  cursor: grabbing;
  box-shadow: inset 0 0 0 1px var(--cell-border-hover);
}

.day-cell.drop-allowed {
  background-image: linear-gradient(to bottom right, oklch(var(--p) / 0.18), oklch(var(--p) / 0.06));
  border-color: var(--cell-border-hover);
  box-shadow:
    inset 0 0 0 2px var(--cell-border-hover),
    inset 0 0 0 999px oklch(var(--p) / 0.08),
    0 0 0 2px oklch(var(--p) / 0.28);
  z-index: 15;
}

.day-cell.drop-blocked {
  background-image: linear-gradient(to bottom right, rgb(220 38 38 / 0.14), rgb(220 38 38 / 0.04));
  border-color: #dc2626;
  box-shadow:
    inset 0 0 0 2px #dc2626,
    inset 0 0 0 999px rgb(220 38 38 / 0.05),
    0 0 0 2px rgb(220 38 38 / 0.18);
  z-index: 15;
}

.day-cell.has-note::after {
  content: "";
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 9999px;
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.72));
  opacity: 0.65;
  z-index: 12;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.day-cell:hover {
  border-color: var(--cell-border-hover);
  box-shadow: inset 0 0 0 1px var(--cell-border-hover);
  filter: brightness(0.97);
}

[data-theme="dark"] .day-cell:hover {
  filter: brightness(1.16);
}

.day-cell:hover .day-watermark {
  opacity: 0.22;
  transform: scale(1.03);
}

.day-cell:hover .cell-content {
  color: var(--fallback-bc, oklch(var(--bc) / 1));
}

.day-cell.has-note:hover::after {
  opacity: 0.95;
  transform: scale(1.12);
}

/* Fin: Contenido de las celdas */

/* Inicio: Colores de celdas */
.color-opt-none {
  background-color: var(--color-none);
}

.color-opt-red {
  background-color: var(--color-red);
}

.color-opt-green {
  background-color: var(--color-green);
}

.color-opt-blue {
  background-color: var(--color-blue);
}

.color-opt-yellow {
  background-color: var(--color-yellow);
}

.color-opt-purple {
  background-color: var(--color-purple);
}

/* Fin: Colores de celdas */

/* Inicio: Menu contextual */
.context-color-swatch {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--cell-border-default);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.context-color-swatch:hover {
  transform: scale(1.04);
  border-color: var(--cell-border-hover);
  box-shadow: inset 0 0 0 1px var(--cell-border-hover);
}

/* Fin: Menu contextual */