:root {
  --navy: #0b1a3a;
  --ink: #33415c;
  --muted: #7a879e;
  --line: #e4eaf3;
  --surface: #ffffff;
  --blue: #2563eb;
  --cyan: #06b6d4;
  --radius: 20px;
  --shadow: 0 1px 2px rgb(11 26 58 / .05), 0 12px 32px -12px rgb(11 26 58 / .18);
  --spring: linear(0, .22 7%, .66 16%, 1.04 27%, 1.12 35%, 1.06 46%, .99 58%, 1);
  font-family: "Geist", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; margin: 0; }
svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vmin, 72px);
  background:
    radial-gradient(60% 40% at 15% 0%, rgb(6 182 212 / .16), transparent),
    radial-gradient(50% 40% at 100% 100%, rgb(37 99 235 / .16), transparent),
    #eef3fa;
}

.agenda {
  width: min(100%, 1180px);
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background: rgb(255 255 255 / .62);
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 30px 80px -30px rgb(11 26 58 / .3);
  backdrop-filter: blur(18px);
}

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; }
.logo { width: 44px; padding: 11px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
h1 { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.brand p, .hint { font-size: 13px; color: var(--muted); }

.play {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: 999px;
  font: 600 14px/1 "Geist", system-ui; color: #fff; background: var(--navy);
  box-shadow: 0 8px 20px -8px var(--navy); cursor: pointer;
}
.play svg { width: 16px; fill: currentColor; stroke: none; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.kpi span, .kpi small { font-size: 12px; color: var(--muted); }
.kpi strong { font-size: 28px; font-weight: 700; color: var(--navy); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transform-origin: left; }
.kpi strong.bump { animation: bump .5s var(--spring); }
.bar { height: 6px; margin-top: 6px; border-radius: 9px; background: linear-gradient(90deg, var(--blue), var(--cyan)) 0 / var(--p, 0%) 100% no-repeat, var(--line); transition: background-size .8s var(--spring); }

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.columna { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 14px; border-radius: var(--radius); background: rgb(255 255 255 / .55); border: 1px solid var(--line); }
.columna > header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; }
.avatar { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, white); }
h2 { font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.columna header p { font-size: 12px; color: var(--muted); }
.carga { grid-column: 1 / -1; height: 4px; margin-top: 8px; border-radius: 9px; background: linear-gradient(var(--accent), var(--accent)) 0 / var(--p, 0%) 100% no-repeat, var(--line); transition: background-size .8s var(--spring); }

.lista { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; }

.turno {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 6px;
  min-height: calc(var(--min) * 1.75px);
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow), inset 3px 0 0 var(--accent);
  touch-action: none; user-select: none; cursor: grab;
  transition: box-shadow .25s, scale .25s;
}
.turno header { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.turno time { font-weight: 600; color: var(--accent); }
.turno h3 { font-size: 14px; font-weight: 600; color: var(--navy); }
.turno footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; }
.tipo { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado { flex: none; padding: 3px 8px; border-radius: 99px; font-weight: 600; color: #0f766e; background: #e6f7f4; }
.estado[data-estado="A confirmar"] { color: #b45309; background: #fdf3e3; }
.estado[data-estado="En sala"] { color: #0e7490; background: #e0f6fb; }
.estado[data-estado="Nuevo"] { color: var(--blue); background: #e8efff; }

.cancelar { position: absolute; top: 8px; right: 8px; display: grid; padding: 4px; border: 0; border-radius: 8px; color: var(--muted); background: #f1f4f9; opacity: 0; transition: opacity .2s; cursor: pointer; }
.turno header { padding-right: 0; transition: padding .2s; }
.turno:is(:hover, .is-target) .cancelar { opacity: 1; }
.turno:is(:hover, .is-target) header { padding-right: 28px; }
.turno.is-drag { z-index: 5; scale: 1.04; cursor: grabbing; box-shadow: 0 24px 48px -16px rgb(11 26 58 / .35), inset 3px 0 0 var(--accent); }
.turno.is-target { box-shadow: 0 0 0 2px #fca5a5, var(--shadow); }
.columna:has(.is-drag) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, white); }

.hint { text-align: center; }

@keyframes bump { 40% { scale: 1.12; color: var(--blue); } }

@media (max-width: 860px) {
  .kpis, .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding-block: 14px; }
}

@media (max-width: 860px), (max-height: 860px) {
  .agenda { gap: 16px; padding: 22px; }
  .hint { display: none; }
  .turno { min-height: calc(var(--min) * 1.35px); padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}