/* ============================================================
   SALA DE ENSAYO — Panel del negocio
   Lo compartido con admin/ y cliente/ vive en shared/primitives.css
   (shell, sidebar, topbar, kpi, panel, tabs, filas, field, switch).
   Acá queda sólo lo propio de este panel y los overrides deliberados.
   ============================================================ */

/* ---------- Overrides sobre las primitivas ----------
   El panel del negocio es la vista más densa de las tres: muestra muchas filas
   de reserva a la vez. Por eso la topbar y las filas son algo más compactas que
   en admin/cliente, y el estado vacío ocupa menos. */
body{line-height:1.5}
.topbar{height:60px}
.res-row{gap:16px;padding:13px 18px}
.row-actions{gap:8px}
.empty{padding:40px;font-size:13px}

/* La primitiva pone la columna elástica en la SEGUNDA posición porque asume una miniatura
   adelante. En estas listas el primer hijo es el cliente, así que el 1fr le tocaba a la
   sala: la píldora "Sala A" medía 550–630px y, como cada fila es una grilla propia,
   arrancaba en un lugar distinto en cada renglón. Acá cada lista declara sus columnas.

   Las que cambian de contenido según el estado de la fila (comprobante sí/no, "Pendiente"
   vs "Completada") van con ancho FIJO: si no, cada fila las mide distinto y el total y el
   estado bailan de renglón en renglón. */
#resList .res-row,
#estList .res-row{grid-template-columns:1fr auto 140px 168px 92px 116px 118px}
#revList .res-row{grid-template-columns:1fr auto 116px 118px}
#resList .res-total,#estList .res-total{text-align:right}
/* La columna de acciones también es fija y alineada a la derecha: una reserva completada
   muestra un solo botón y, al ser la última columna `auto`, corría toda la fila. */
#resList .row-actions,#estList .row-actions,#revList .row-actions{justify-content:flex-end}

/* Comprobante de la seña. Se dibuja la celda siempre, con o sin link, para que la
   columna exista en todas las filas y la grilla quede alineada. */
.cmp-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:9px;background:var(--graphite-2);border:1px solid var(--line);color:var(--bone-dim);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:.18s var(--glide)}
.cmp-btn:hover{border-color:var(--amber);color:var(--amber)}
.cmp-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cmp-vacio{font-size:11px;color:var(--bone-faint);font-family:var(--font-display);white-space:nowrap}

/* ---------- Marca de la sidebar ---------- */
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--amber);color:var(--on-amber,#1a1a1d);display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:18px;box-shadow:var(--shadow-key)}

/* ---------- Cuenta (pie de la sidebar) ---------- */
.acct{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px}
.acct .av{width:32px;height:32px;border-radius:50%;background:var(--graphite-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--bone-dim)}
.acct .av svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.acct .meta{display:flex;flex-direction:column;min-width:0}
.acct .meta b{font-size:13px;font-weight:600;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .meta span{font-size:11px;color:var(--bone-faint)}

/* ---------- Buscador de la topbar ---------- */
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:8px 14px;min-width:200px}
.search:focus-within{border-color:var(--amber)}
.search svg{width:16px;height:16px;stroke:var(--bone-dim);fill:none;stroke-width:2}
.search input{background:none;border:none;outline:none;color:var(--bone);font-size:13px;width:100%}

/* ---------- KPI: delta propio del panel ---------- */
.kpi .delta{font-size:11px;color:var(--ok);margin-top:4px;font-family:var(--font-display)}

/* ---------- Filas de reserva ---------- */
.res-row .av{width:38px;height:38px;border-radius:10px;background:var(--graphite-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--amber);flex:none}
.res-row .name{font-weight:600;font-size:14px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .meta{font-size:12px;color:var(--bone-faint);font-family:var(--font-display)}
.res-room{font-size:12px;color:var(--bone-dim);font-weight:600;background:var(--graphite-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;white-space:nowrap}
.res-total{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:100px;white-space:nowrap}
.status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.status.pending{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.status.confirmed{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.status.completed{color:var(--bone-dim);background:var(--graphite-2)}
.status.cancelled{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.icon-btn.ok:hover{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.icon-btn.cancel:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}

/* ---------- Calendario ---------- */
.cal-grid{display:grid;grid-template-columns:64px repeat(6,minmax(118px,1fr));gap:8px;overflow-x:auto;padding:4px;position:relative;scrollbar-width:thin;scrollbar-color:var(--bone-faint) transparent}
.cal-grid::-webkit-scrollbar{height:6px}
.cal-grid::-webkit-scrollbar-track{background:transparent}
.cal-grid::-webkit-scrollbar-thumb{background:var(--bone-faint);border-radius:100px}
.cal-grid::-webkit-scrollbar-thumb:hover{background:var(--bone-dim)}
.cal-corner,.cal-dow{font-family:var(--font-display);font-size:11px;color:var(--bone-faint);text-transform:uppercase;letter-spacing:.04em;padding:6px 4px;text-align:center}
.cal-dow.today{color:var(--amber);font-weight:700}
.cal-time{font-family:var(--font-display);font-size:11px;color:var(--bone-faint);display:flex;align-items:center;justify-content:flex-end;padding-right:6px}
.cal-cell{height:46px;border-radius:9px;border:1px solid var(--line);background:var(--graphite-2);display:flex;flex-direction:column;gap:3px;padding:5px;justify-content:center;overflow:hidden;transition:border-color .2s ease}
.cal-cell.free{border-style:dashed;opacity:.55}
.cal-cell.free .ph{font-size:10px;color:var(--bone-faint);text-align:center;font-family:var(--font-display)}
.cal-slot{font-size:10px;font-weight:700;border-radius:6px;padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.cal-slot.r-0 { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.cal-slot.r-1 { background: color-mix(in srgb, var(--wire) 18%, transparent); color: var(--wire); border: 1px solid color-mix(in srgb, var(--wire) 38%, transparent); }
.cal-slot.r-2 { background: color-mix(in srgb, var(--cat-backline,#46d4a0) 18%, transparent); color: var(--cat-backline,#46d4a0); border: 1px solid color-mix(in srgb, var(--cat-backline,#46d4a0) 38%, transparent); }
.cal-slot.r-3 { background: color-mix(in srgb, var(--cat-extras,#7c5cff) 18%, transparent); color: var(--cat-extras,#7c5cff); border: 1px solid color-mix(in srgb, var(--cat-extras,#7c5cff) 38%, transparent); }
.cal-slot.r-4 { background: color-mix(in srgb, var(--warn,#ffb84d) 16%, transparent); color: var(--warn,#ffb84d); border: 1px solid color-mix(in srgb, var(--warn,#ffb84d) 36%, transparent); }
.cal-slot.r-5 { background: color-mix(in srgb, #ff5ebc 16%, transparent); color: #ff5ebc; border: 1px solid color-mix(in srgb, #ff5ebc 36%, transparent); }
.cal-slot.r-6 { background: color-mix(in srgb, #00f3ff 14%, transparent); color: #00f3ff; border: 1px solid color-mix(in srgb, #00f3ff 34%, transparent); }
.cal-slot.r-7 { background: color-mix(in srgb, #a3e635 16%, transparent); color: #a3e635; border: 1px solid color-mix(in srgb, #a3e635 36%, transparent); }

.cal-slot.cancelled{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);text-decoration:line-through}
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--bone-dim)}
.cal-legend .lg{display:flex;align-items:center;gap:7px}
.cal-legend .sw{width:14px;height:14px;border-radius:5px}

.cal-legend .sw.r-0 { background: color-mix(in srgb, var(--amber) 30%, transparent); border: 1px solid var(--amber); }
.cal-legend .sw.r-1 { background: color-mix(in srgb, var(--wire) 26%, transparent); border: 1px solid var(--wire); }
.cal-legend .sw.r-2 { background: color-mix(in srgb, var(--cat-backline,#46d4a0) 26%, transparent); border: 1px solid var(--cat-backline,#46d4a0); }
.cal-legend .sw.r-3 { background: color-mix(in srgb, var(--cat-extras,#7c5cff) 26%, transparent); border: 1px solid var(--cat-extras,#7c5cff); }
.cal-legend .sw.r-4 { background: color-mix(in srgb, var(--warn,#ffb84d) 26%, transparent); border: 1px solid var(--warn,#ffb84d); }
.cal-legend .sw.r-5 { background: color-mix(in srgb, #ff5ebc 26%, transparent); border: 1px solid #ff5ebc; }
.cal-legend .sw.r-6 { background: color-mix(in srgb, #00f3ff 24%, transparent); border: 1px solid #00f3ff; }
.cal-legend .sw.r-7 { background: color-mix(in srgb, #a3e635 26%, transparent); border: 1px solid #a3e635; }
.cal-legend .sw.free{background:var(--graphite-2);border:1px dashed var(--bone-faint)}

/* ---------- Modalidades (Mi Negocio) ----------
   Las cuatro líneas de negocio se prenden desde un solo lugar. Antes Estudio era un
   <select> perdido entre los campos, Rental no tenía control ninguno (quedaba siempre
   encendido) y Radio sólo se prendía desde su propia sección. */
.modo-list{display:flex;flex-direction:column;gap:2px}
.modo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.modo-row:last-child{border-bottom:none}
.modo-txt{min-width:0}
.modo-txt b{display:block;font-size:14px;color:var(--bone);font-weight:600}
.modo-txt span{display:block;font-size:12px;color:var(--bone-faint);margin-top:2px;line-height:1.4}

/* ---------- Radio Reel ----------
   Casi todo sale de shared/primitives.css (.panel, .form-grid, .field, .res-row,
   .switch) y de panel-components (.ph-upload). Acá sólo lo que no existía. */
.rd-power{display:flex;align-items:center;gap:10px}
.rd-intro{padding:0 18px;margin-top:16px;font-size:13px;color:var(--bone-dim);line-height:1.5;max-width:70ch}
.rd-rights{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:11px;background:var(--graphite-2);border:1px solid var(--line);font-size:13px;color:var(--bone-dim);line-height:1.45;cursor:pointer}
.rd-rights input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--amber);cursor:pointer}
.rd-rights:hover{border-color:var(--bone-faint)}
.rd-actions{display:flex;align-items:center;gap:12px;padding:0 18px 18px;flex-wrap:wrap}
/* El botón de reproducir es el mismo icon-btn, pero se tiñe de ámbar mientras suena
   para que se vea cuál de la lista está sonando. */
.rd-play.playing{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.rd-dur{font-family:var(--font-display);font-size:12px;color:var(--bone-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Fila en edición: ocupa las columnas del medio de la grilla de .res-row. */
/* El drag handle agregó un hijo más a .res-row; redefinimos la grilla
   para que handle, play, info, duración, estado y acciones quepan en una fila. */
.rd-track-row{grid-template-columns:auto auto 1fr auto auto auto}
.rd-track-row .rd-drag-handle{display:flex;align-items:center;color:var(--bone-faint);padding:0 4px 0 2px;cursor:grab}
.rd-editing{grid-template-columns:auto 1fr auto auto auto auto}
.rd-editing .rd-edit{grid-column:2/6;display:flex;gap:10px;flex-wrap:wrap}
.rd-in{flex:1;min-width:140px;background:var(--graphite-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;color:var(--bone);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s ease}
.rd-in:focus{border-color:var(--amber)}
/* Un tema sin acreditar no se puede publicar: que se vea cuál falta. */
.rd-falta{color:var(--warn)!important}

/* ---------- Reseñas: mini estrellas en la lista ---------- */
.rvs{display:inline-flex;gap:1px;vertical-align:middle;margin-left:6px}
.rvs svg{width:13px;height:13px}
.rvs .rvs-full{fill:var(--amber)}
.rvs .rvs-empty{fill:none;stroke:var(--bone-faint);stroke-width:1.5}

/* ---------- Rental: colores del calendario de retiros por grupo ----------
   (el prototipo referenciaba estas clases pero nunca las definió) */
.cal-slot.salas{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
.cal-slot.backline{background:color-mix(in srgb,var(--cat-backline,#46d4a0) 18%,transparent);color:var(--cat-backline,#46d4a0);border:1px solid color-mix(in srgb,var(--cat-backline,#46d4a0) 38%,transparent)}
.cal-slot.extras{background:color-mix(in srgb,var(--cat-extras,#7c5cff) 18%,transparent);color:var(--cat-extras,#7c5cff);border:1px solid color-mix(in srgb,var(--cat-extras,#7c5cff) 38%,transparent)}
.cal-legend .sw.cat-salas{background:color-mix(in srgb,var(--amber) 30%,transparent);border:1px solid var(--amber)}
.cal-legend .sw.cat-backline{background:color-mix(in srgb,var(--cat-backline,#46d4a0) 26%,transparent);border:1px solid var(--cat-backline,#46d4a0)}
.cal-legend .sw.cat-extras{background:color-mix(in srgb,var(--cat-extras,#7c5cff) 26%,transparent);border:1px solid var(--cat-extras,#7c5cff)}

/* ---------- Responsive propio ----------
   El drawer y el colapso de columnas los trae primitives.css; acá sólo qué
   columnas se esconden en esta vista. */
@media(max-width:820px){
  /* En pantalla chica quedan cliente + estado + acciones; sala, comprobante y total se
     esconden (el comprobante sigue estando en el modal de edición). */
  .res-row .res-room,.res-row .res-total,.res-row .cmp-btn,.res-row .cmp-vacio,
  .res-row .cli-cell,.res-row .cli-vacio{display:none}
  #resList .res-row,#estList .res-row,#revList .res-row{grid-template-columns:1fr auto auto}
}

/* ---------- Calificación del cliente ----------
   Es compartida entre salas, así que en la fila lo primero es la reputación que el
   cliente trae, y recién después el botón para calificarlo. */
.cli-cell{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cli-repu{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:12px;color:var(--bone-dim)}
.cli-repu.nuevo{color:var(--bone-faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.cli-vacio{font-size:11px;color:var(--bone-faint);font-family:var(--font-display);white-space:nowrap}
.cli-btn{padding:5px 11px;border-radius:8px;background:var(--graphite-2);border:1px solid var(--line);color:var(--bone-dim);font-size:12px;font-weight:600;cursor:pointer;transition:.18s var(--glide);white-space:nowrap}
.cli-btn:hover{border-color:var(--amber);color:var(--amber)}
.cli-btn.hecha{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);font-family:var(--font-display);font-weight:700}
.rate-who{font-size:14px;color:var(--bone);font-weight:600;margin-bottom:6px}
.rate-aviso{font-size:12px;color:var(--warn);line-height:1.45;margin-bottom:14px}
.rate-stars{display:flex;gap:8px;justify-content:center;padding:6px 0 16px}
.rate-star{background:none;border:none;cursor:pointer;padding:0;width:34px;height:34px;transition:transform .15s var(--spring)}
.rate-star svg{width:34px;height:34px;fill:var(--line)}
.rate-star.on svg{fill:var(--amber)}
.rate-star:hover{transform:scale(1.12)}

/* ---------- Bloqueos de franja (Calendario) ---------- */
.blk-form {
  display: grid;
  grid-template-columns: 140px 140px 100px 80px 1fr auto;
  gap: 16px;
  align-items: flex-end;
  padding: 16px 18px;
}
.blk-form .btn-save {
  height: 42px;
}
.blk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 18px;
}
.blk-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--card-2)}
.blk-when{font-family:var(--font-display);font-size:13px;color:var(--bone);min-width:170px}
.blk-sala{font-size:12px;padding:3px 9px;border-radius:100px;border:1px solid var(--line);color:var(--bone-dim)}
.blk-motivo{flex:1;min-width:0;font-size:12px;color:var(--bone-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-del{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:none;color:var(--bone-faint);cursor:pointer;font-size:15px;line-height:1}
.blk-del:hover{color:var(--danger,#e0605b);border-color:color-mix(in srgb,var(--danger,#e0605b) 45%,transparent)}
.blk-vacio{padding:18px;text-align:center;font-size:13px;color:var(--bone-faint)}

/* Respuesta del dueño colgada de la reseña, en el panel. */
.rev-respuesta{grid-column:1/-1;margin-top:8px;padding:9px 12px;border-left:2px solid var(--amber);background:var(--graphite-2);border-radius:0 8px 8px 0;font-size:12.5px;line-height:1.5;color:var(--bone-dim)}
.rev-respuesta b{color:var(--amber);font-weight:700}

/* ---------- Logo del estudio (Datos del estudio) ----------
   Se previsualiza redondo porque así lo dibuja el pin del mapa: si el logo no entra en un
   círculo, conviene que el dueño lo vea acá y no después en el mapa. */
.logo-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-prev{flex:0 0 64px;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--card-2);border:1px solid var(--line)}
.logo-prev.vacia{border-style:dashed}
.logo-prev img{width:100%;height:100%;object-fit:cover}
.logo-inicial{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--bone-faint)}
.logo-zone .btn-ghost.sm{padding:8px 14px;font-size:12.5px}

/* ---------- Navegación de semana del calendario ----------
   `.cal-nav` existe en shared/components.css, pero como estilo de un BOTÓN de 30 px, y el
   panel no carga esa hoja: acá `.cal-nav` es el contenedor y adentro van dos flechas, el
   rango y "Hoy". Ninguna de las cuatro clases tenía reglas, así que los SVG de las flechas
   quedaban sin tamaño —o sea, invisibles— y no había forma de cambiar de semana. */
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-arrow{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line);background:var(--card-2);color:var(--bone-dim);cursor:pointer;transition:.18s var(--glide)}
.cal-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cal-arrow:hover{border-color:var(--amber);color:var(--amber)}
.cal-range{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--bone);font-variant-numeric:tabular-nums;min-width:106px;text-align:center}
.cal-today{padding:6px 13px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--bone-dim);font-family:var(--font-display);font-weight:700;font-size:12px;cursor:pointer;transition:.18s var(--glide)}
.cal-today:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- Ajustes: layout de tarjetas en 2 columnas ---------- */
.aj-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px;
  align-items: start;
}
@media (max-width: 820px) {
  .aj-split { grid-template-columns: 1fr; }
}
.aj-card {
  background: var(--graphite-2);
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  overflow: hidden;
}
.aj-card-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.aj-card-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.aj-card-head p {
  font-size: 12px;
  color: var(--bone-faint);
  line-height: 1.4;
}
.aj-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aj-card-body .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aj-card-body .field label {
  font-size: 12px;
  color: var(--bone-dim);
  font-weight: 600;
}
.aj-card-body .field input,
.aj-card-body .field textarea,
.aj-card-body .field select {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--bone);
  font-size: 13px;
  outline: none;
  transition: border-color .2s ease;
}
.aj-card-body .field input:focus,
.aj-card-body .field textarea:focus {
  border-color: var(--amber);
}
.aj-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) {
  .aj-field-row { grid-template-columns: 1fr; }
}
/* Handle / dirección web: prefijo fijo + input unidos visualmente. */
.handle-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .2s ease;
}
.handle-field:focus-within { border-color: var(--amber); }
.handle-field .handle-prefix {
  display: flex;
  align-items: center;
  padding: 9px 8px 9px 12px;
  color: var(--bone-faint);
  font-size: 13px;
  white-space: nowrap;
  background: var(--graphite-2);
  border-right: 1px solid var(--line);
}
.aj-card-body .field .handle-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 9px 12px 9px 8px;
}
.aj-card-body .field .handle-field input:focus { border-color: transparent; }
/* Columna de la izquierda en Operación: apila dos tarjetas. */
.aj-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Campo de hora + dial giratorio al lado (mismo dial que usa /reservas/). */
.field-with-knob { display: flex; align-items: flex-end; gap: 12px; }
.field-with-knob .field { flex: 1; min-width: 0; }
.hour-knob {
  position: relative; width: 46px; height: 46px; flex: 0 0 auto;
  touch-action: none; cursor: grab; user-select: none; margin-bottom: 1px;
}
.hour-knob:active { cursor: grabbing; }
.hour-knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 50%; }
.hour-knob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hour-knob .hk-track { fill: none; stroke: var(--card-2); stroke-width: 6; stroke-linecap: round; }
.hour-knob .hk-arc { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; }
.hour-knob .hk-dial {
  position: absolute; inset: 7px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--card), var(--card-2));
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,.28);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hour-knob .hk-dial.dragging { transition: none; }
.hour-knob .hk-ind {
  position: absolute; top: 4px; left: 50%; width: 3px; height: 10px; margin-left: -1.5px;
  border-radius: 2px; background: var(--amber);
}

/* ---------- Clientes › Historial ---------- */
.hist-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.hist-filtros input[type="search"] { flex: 1 1 240px; min-width: 200px; }
.hist-filtros input, .hist-filtros select {
  height: 34px; padding: 0 10px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line); color: var(--bone); font-size: 13px; outline: none;
}
.hist-filtros input:focus, .hist-filtros select:focus { border-color: var(--amber); }
.hist-fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bone-dim); }
.hist-fecha input { width: 140px; }
.hist-resumen { font-size: 13px; color: var(--bone-dim); margin-bottom: 12px; }
.hist-resumen b { color: var(--bone); }
.hist-list { display: flex; flex-direction: column; gap: 12px; }
.hist-cliente { border: 1px solid var(--line); border-radius: 12px; background: var(--graphite-2); overflow: hidden; }
.hist-cli-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer; user-select: none;
}
.hist-cli-head:hover { background: var(--card-2); }
.hist-cli-nombre { font-family: var(--font-display); font-weight: 800; color: var(--bone); }
.hist-cli-sub { font-size: 12px; color: var(--bone-dim); font-weight: 400; margin-left: 8px; }
.hist-cli-stats { font-size: 12px; color: var(--bone-dim); white-space: nowrap; }
.hist-cli-stats b { color: var(--amber); }
.hist-cli-reservas { padding: 2px 14px 10px; display: none; }
.hist-cliente.abierto .hist-cli-reservas { display: block; }
.hist-cliente.abierto .hist-cli-head { border-bottom: 1px solid var(--line); }
.hist-empty { padding: 30px 14px; text-align: center; color: var(--bone-faint); font-size: 13px; }
.hist-res {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.hist-res:last-child { border-bottom: none; }
.hist-res-fecha { color: var(--bone); min-width: 150px; }
.hist-res-sala { color: var(--bone-dim); flex: 1 1 140px; }
.hist-res-num { color: var(--bone-faint); font-family: var(--font-mono, monospace); font-size: 12px; }
.hist-res-total { color: var(--bone); font-weight: 600; }
.hist-res-total em { color: var(--bone-faint); font-weight: 400; font-style: normal; font-size: 12px; }
.aj-tip {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: color-mix(in srgb, var(--amber) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 15%, transparent);
  border-radius: 10px;
}
.aj-tip svg {
  width: 22px;
  height: 22px;
  flex: none;
  stroke: var(--amber);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
.aj-tip p {
  font-size: 13px;
  color: var(--bone-dim);
  line-height: 1.5;
  margin-bottom: 6px;
}
.aj-tip p:last-child { margin-bottom: 0; }
.aj-tip b { color: var(--amber); }

/* ---------- Padding general del contenido ----------
   Desktop: más aire en los laterales para que las secciones respiren. */
.content {
  padding: 32px 64px !important;
}

@media (max-width: 768px) {
  .mb-nav-menu {
    display: none !important;
  }
  .mobile-dock {
    display: flex !important;
  }
  /* Móvil: padding original compacto, no agregar aire extra */
  .content {
    padding: 20px 16px 90px !important;
  }
  /* Topbar más compacta */
  .topbar {
    padding: 0 12px !important;
  }
  /* Tabs con scroll horizontal en pantallas chicas */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* Panel heads apilados en móvil */
  .panel-head {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 14px !important;
  }
  /* Filas de reserva más compactas */
  .res-row {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  /* Nombre y badge de reputación: truncar */
  .res-row .name {
    font-size: 13px;
  }
  .cli-repu-badge {
    display: none;
  }
  /* Acciones más chicas */
  .icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }
  .icon-btn svg {
    width: 14px;
    height: 14px;
  }
  /* KPI: valores más chicos */
  .kpi .val {
    font-size: 22px;
  }
  .kpi {
    padding: 14px;
  }
  .kpi .ico {
    width: 36px;
    height: 36px;
  }
  .kpi .ico svg {
    width: 18px;
    height: 18px;
  }
  /* Formularios full-width */
  .form-grid {
    padding: 14px !important;
  }
  /* Calendario: celdas más estrechas */
  .cal-grid {
    gap: 4px;
  }
  /* Dock items más compactos */
  .dock-item {
    padding: 6px 8px;
  }
  /* Bloqueos */
  .blk-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .blk-when {
    min-width: auto;
    width: 100%;
  }
  .blk-form {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .blk-form .field:nth-child(5) {
    grid-column: 1 / -1 !important;
  }
  .blk-form .btn-save {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .blk-list {
    padding: 0 14px 14px !important;
  }
}

/* Tablets: ajustes intermedios */
@media (max-width: 992px) and (min-width: 769px) {
  .content {
    padding: 24px 32px !important;
  }
}

/* ---------- Radio: Drag and Drop Ordenación ---------- */
.rd-drag-handle {
  transition: color .2s ease;
}
.rd-drag-handle:hover {
  color: var(--bone-dim) !important;
}
.res-row.rd-track-row.dragging {
  opacity: 0.4;
  border-style: dashed;
  background: var(--card-2);
}
.res-row.rd-track-row.drag-over {
  border-top: 2px solid var(--amber) !important;
}

.modal.modal-md {
  max-width: 680px;
}

.radio-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 768px) {
  .radio-layout {
    grid-template-columns: 1fr;
  }
}

.rental-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 992px) {
  .rental-split-layout {
    grid-template-columns: 1fr;
  }
}

.tab-badge {
  display: inline-block;
  background: var(--amber);
  color: var(--on-amber, #1a1a1d);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  line-height: 1;
  vertical-align: middle;
}

/* Drag & Drop Visual Styles */
.cal-slot.dragging {
  opacity: 0.4;
}
.cal-cell.drag-over {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px dashed var(--amber) !important;
}

.cli-btn.hecha.stars-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
}
.cli-btn.hecha.stars-btn .rvs {
  display: inline-flex;
  gap: 2px;
}
.cli-btn.hecha.stars-btn .rvs svg {
  width: 12px;
  height: 12px;
}

.cli-repu-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 15%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1;
}
.cli-repu-badge .rvs {
  margin-left: 0;
  display: inline-flex;
  gap: 1px;
}
.cli-repu-badge .rvs svg {
  width: 9px;
  height: 9px;
}
.cli-repu-badge.nuevo {
  color: var(--bone-faint);
  background: var(--graphite-2);
  border: 1px solid var(--line);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 1px 4px;
}
.cli-repu-badge .repu-val {
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber);
  margin-left: 2px;
}

@media (min-width: 1081px) {
  .kpi-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media(max-width:820px){
  /* En pantalla chica el handle se esconde (no es usable) y la duración también;
     quedan play + info + estado + acciones en una fila. */
  .rd-track-row{grid-template-columns:auto 1fr auto auto;row-gap:8px}
  .rd-track-row .rd-drag-handle{display:none}
  .rd-track-row .rd-dur{display:none}
  .rd-editing{grid-template-columns:auto 1fr auto}
  .rd-editing .rd-edit{grid-column:2/3}
}

/* Estilos para el buscador inteligente */
.search-result-item:hover {
  background: var(--graphite-2) !important;
  border-color: var(--amber) !important;
}


/* ===================== Plan / Suscripción ===================== */
.plan-banner{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  padding:10px 18px; background:color-mix(in srgb,var(--danger) 14%,var(--card));
  border-bottom:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));
  color:var(--bone); font-size:13.5px;
}
.plan-banner span{ flex:1 1 auto; min-width:200px; }
.pb-btn{
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); color:var(--bone); cursor:pointer; white-space:nowrap;
}
.pb-btn:hover{ border-color:var(--amber); color:var(--amber); }
.pb-btn.primary{ background:var(--amber); border-color:var(--amber); color:var(--on-amber,#1a1a1d); }
.pb-btn.primary:hover{ color:var(--on-amber,#1a1a1d); filter:brightness(1.05); }
.pb-btn.ghost{ background:transparent; }
.pb-btn:disabled{ opacity:.55; cursor:default; }

#view-plan .panel{ max-width:760px; }

/* Estado actual */
.plan-state{ margin:2px 0 20px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.plan-badge{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:11px; letter-spacing:.06em; padding:5px 11px; border-radius:100px;
  background:var(--graphite-2); color:var(--bone-dim); border:1px solid var(--line);
}
.plan-badge.pro{ background:var(--amber); color:var(--on-amber,#1a1a1d); border-color:var(--amber); }
.plan-state-note{ font-size:13px; color:var(--bone-dim); }
.plan-state-note.warn{ color:var(--danger); font-weight:600; }

/* Tarjetas de plan */
.plan-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
@media (max-width:620px){ .plan-cards{ grid-template-columns:1fr; } }
.plan-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:14px; padding:20px;
  background:var(--card);
}
.plan-card.pro{ background:var(--card-2); }
.plan-card.is-current{ border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); }
.plan-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.plan-card-head h3{ margin:0; font-family:var(--font-display); font-size:17px; color:var(--bone); }
.plan-chip{
  font-family:var(--font-display); font-weight:700; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; padding:3px 8px; border-radius:100px;
  background:color-mix(in srgb,var(--amber) 18%,transparent); color:var(--amber);
  border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);
}
.plan-card-price{
  margin:0; font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--bone);
}
.plan-card-price span{ font-size:13px; font-weight:600; color:var(--bone-faint); }
.plan-card-sub{ margin:4px 0 14px; font-size:12.5px; color:var(--bone-dim); line-height:1.45; }

.plan-feats{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; flex:1 1 auto; }
.plan-feats li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; line-height:1.35; color:var(--bone-faint);
}
.plan-feats li.on{ color:var(--bone); }
.pf-ico{ flex:none; width:16px; height:16px; border-radius:50%; margin-top:1px; position:relative; }
.plan-feats li.on .pf-ico{ background:color-mix(in srgb,var(--ok) 22%,transparent); box-shadow:inset 0 0 0 1.5px var(--ok); }
.plan-feats li.on .pf-ico::after{
  content:""; position:absolute; left:5px; top:2.5px; width:4px; height:8px;
  border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.plan-feats li.off .pf-ico{ background:var(--graphite-2); box-shadow:inset 0 0 0 1px var(--line); }
.plan-feats li.off .pf-ico::after{
  content:""; position:absolute; left:4px; top:7px; width:8px; height:2px;
  background:var(--bone-faint);
}

/* Toggle mensual / anual */
.plan-int{ display:flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--line); border-radius:100px; margin-bottom:12px; }
.pb-tab{ flex:1 1 0; border:0; background:none; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:11.5px; padding:8px 10px; border-radius:100px; color:var(--bone-dim); white-space:nowrap; }
.pb-tab.on{ background:var(--amber); color:var(--on-amber,#1a1a1d); }

.plan-pay{ display:flex; flex-direction:column; gap:8px; }
.plan-card-btn{ width:100%; text-align:center; }
.plan-help{ margin-top:18px; }
.plan-help a{ color:var(--amber); text-decoration:underline; text-underline-offset:2px; }
.plan-help a:hover{ text-decoration:none; }

/* ---------- Pantalla de autenticación / Login de salas ---------- */
.panel-auth-overlay{
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
}
.panel-auth-card{
  width:100%; max-width:440px; background:var(--card);
  border:1px solid var(--line); border-radius:22px;
  padding:clamp(26px, 5vw, 40px); box-shadow:var(--shadow-lift);
}
.panel-auth-brand{ text-align:center; margin-bottom:26px; }
.panel-auth-brand h2{
  font-family:var(--font-display); font-size:24px;
  margin-top:14px; color:var(--bone); letter-spacing:-.02em;
}
.panel-auth-brand p{ font-size:13.5px; color:var(--bone-dim); margin-top:6px; line-height:1.45; }
.panel-auth-form{ display:flex; flex-direction:column; gap:16px; }
.panel-auth-field{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--bone); }
.panel-auth-field input{
  width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--graphite-2); color:var(--bone);
  font:inherit; font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.panel-auth-field input:focus{
  border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 16%,transparent);
}
.panel-auth-links-row{ display:flex; justify-content:flex-end; margin-top:-6px; }
.panel-auth-link{ font-size:12.5px; color:var(--amber); text-decoration:none; cursor:pointer; }
.panel-auth-link:hover{ text-decoration:underline; }
.panel-auth-submit{
  width:100%; padding:12px; margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.panel-auth-submit[disabled]{ opacity:.65; pointer-events:none; }
.panel-auth-error{
  padding:10px 14px; border-radius:10px; background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.3); color:#fca5a5; font-size:13px; line-height:1.4;
}
.panel-auth-success{
  padding:10px 14px; border-radius:10px; background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.3); color:#86efac; font-size:13px; line-height:1.4;
}
.panel-auth-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px;
}
.panel-auth-back{ color:var(--bone-faint); text-decoration:none; transition:color .2s; }
.panel-auth-back:hover{ color:var(--bone); }