/* BASTIUM CRM - reservas.css
   Pagina de reserva (mecanica de Calendly: ficha, mes y horas del dia) y editor
   de disponibilidad. Se apoya en tokens.css y componentes.css.
   Cero colores a mano, cero SVG, cero emojis. */

/* ============================================================ agendar */

/* Proporciones de Calendly: ficha ancha, mes compacto en el centro y columna de
   horas holgada. La tarjeta no se estira a lo ancho de la pantalla. */
.cita-cuadro {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 300px;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  max-width: 1120px;
  margin: 0 auto;
}

/* ---- columna 1: que cita es ---- */

.cita-ficha {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  border-right: 1px solid var(--borde);
  background: var(--cristal);
  min-width: 0;
}

.cita-ficha-cabecera,
.cita-ficha-form {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  min-width: 0;
}

.cita-ficha-form {
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

.cita-ficha-titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--fuente-display);
  font-size: var(--t-2xl);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  line-height: var(--interlinea-titulo);
}

.cita-ficha-dato {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}

.cita-ficha-etiqueta {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-3);
  min-width: 92px;
}

.cita-ficha-valor {
  font-size: var(--t-s);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.cita-ficha-lead {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--cristal-2);
}

.cita-ficha-lead > div { display: flex; flex-direction: column; min-width: 0; }
.cita-ficha-lead > .boton { margin-left: auto; flex: none; }

.cita-ficha-lead-nombre {
  font-size: var(--t-s);
  color: var(--texto);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cita-ficha-lead-codigo {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  color: var(--texto-4);
}

.cita-ficha-pie {
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-4);
  line-height: var(--interlinea);
}

/* ---- columna 2: el mes ---- */

.cita-calendario {
  padding: var(--e-6) var(--e-5) var(--e-5);
  min-width: 0;
}

/* El bloque del mes tiene ancho propio y va centrado: el titulo, la cabecera de mes,
   la rejilla y la zona horaria quedan alineados entre si. */
.cita-calendario > * {
  max-width: 336px;
  margin-left: auto;
  margin-right: auto;
}

.cita-titulo {
  margin: 0 0 var(--e-5);
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

/* ---- candado: sin lead no se abre el calendario ---- */

.cita-candado {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-4);
  margin-bottom: var(--e-5);
  border: 1px solid var(--acento-hondo);
  border-radius: var(--r-m);
  background: var(--acento-tenue);
}

.cita-candado[hidden] { display: none; }

.cita-candado-texto { flex: 1 1 150px; min-width: 0; }

.cita-candado-titulo {
  margin: 0;
  font-size: var(--t-s);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.cita-candado-pie {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--texto-3);
  line-height: var(--interlinea);
}

.cita-candado .boton { flex: none; }

/* Arco y cuerpo del candado, dibujados con bordes: nada de iconos importados */
.cita-candado-marca {
  position: relative;
  width: 16px;
  height: 20px;
  flex: none;
  align-self: center;
}

.cita-candado-marca::before {
  content: "";
  position: absolute;
  inset: auto 3px 11px 3px;
  height: 9px;
  border: 1.5px solid var(--acento-claro);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.cita-candado-marca::after {
  content: "";
  position: absolute;
  inset: 9px 0 0 0;
  border: 1.5px solid var(--acento-claro);
  border-radius: 3px;
  background: var(--acento-tenue);
}

/* Mes apagado mientras no haya lead (ademas va con inert desde el JS, asi que
   no se puede pulsar ni llegar con el tabulador). La columna de horas no se
   apaga: ahi se lee el aviso de que falta el lead. */
.cita-calendario.bloqueado .cal-mes,
.cita-calendario.bloqueado .cal-cuerpo {
  opacity: .3;
  filter: grayscale(.7);
  user-select: none;
}

.cal-mes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}

.cal-mes-nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-m);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  margin-right: auto;
}

/* Solo la inicial en mayuscula: "agosto de 2026" y no "Agosto De 2026" */
.cal-mes-nombre::first-letter,
.horas-dia::first-letter { text-transform: uppercase; }

.cal-pasos { display: flex; gap: var(--e-2); }

.cal-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-s);
  background: var(--cristal-2);
  color: var(--texto-2);
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva);
}

.cal-paso:hover:not([disabled]) { background: var(--cristal-3); border-color: var(--borde-fuerte); }
.cal-paso:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cal-paso[disabled] { opacity: .35; cursor: not-allowed; }

/* Mes chiquitito: celdas de 42 px, no se estiran con la pantalla */
.cal-rejilla {
  display: grid;
  grid-template-columns: repeat(7, 42px);
  justify-content: center;
  gap: 6px;
  transition: opacity var(--v-normal) var(--curva);
}

.cal-rejilla.cargando { opacity: .4; pointer-events: none; }

.cal-cabecera {
  text-align: center;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-etiqueta);
  color: var(--texto-4);
  padding-bottom: var(--e-2);
}

.cal-relleno { width: 42px; height: 42px; }

.cal-dia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--texto-4);
  font-family: var(--fuente);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: background var(--v-rapida) var(--curva), color var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.cal-dia[disabled] { opacity: .45; }

.cal-dia.libre {
  background: var(--acento-tenue);
  color: var(--acento-claro);
  font-weight: var(--peso-fuerte);
  cursor: pointer;
}

.cal-dia.libre:hover {
  background: var(--cristal-3);
  border-color: var(--acento-hondo);
  color: var(--texto);
  transform: translateY(-1px);
}

.cal-dia:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.cal-dia.hoy { border-color: var(--borde-fuerte); }

.cal-dia.elegido,
.cal-dia.elegido:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto-sobre-acento);
  box-shadow: var(--brillo-acento);
}

.cal-dia-numero { line-height: 1; }

.cal-dia-punto {
  width: 4px;
  height: 4px;
  border-radius: var(--r-redondo);
  background: currentColor;
  opacity: .8;
}

.cal-zona {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-6) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.cal-zona-marca {
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: var(--r-redondo);
  opacity: .6;
  flex: none;
}

/* ---- columna 3: las horas del dia ---- */

.cita-horas {
  border-left: 1px solid var(--borde);
  background: var(--cristal);
  min-width: 0;
}

.horas-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-5);
  max-height: 560px;
  overflow-y: auto;
}

.horas-cabecera {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.horas-dia {
  font-size: var(--t-m);
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.horas-cuenta {
  font-size: var(--t-xs);
  color: var(--texto-4);
}

.horas-pista {
  margin: 0;
  font-size: var(--t-s);
  color: var(--texto-3);
  line-height: var(--interlinea);
}

.horas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.hora {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  width: 100%;
  padding: 14px var(--e-3);
  border: 1px solid var(--acento-hondo);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--acento-claro);
  font-family: var(--fuente);
  font-size: var(--t-m);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), color var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva);
}

.hora:hover {
  background: var(--acento-tenue);
  border-color: var(--acento);
  color: var(--texto);
}

.hora:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.hora-libres {
  font-size: var(--t-micro);
  padding: 1px 6px;
  border-radius: var(--r-redondo);
  background: var(--cristal-3);
  color: var(--texto-3);
}

/* Al elegir la hora la fila se parte en dos: la hora a la izquierda, confirmar a la derecha */
.hora-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}

.hora-par .hora.elegida {
  background: var(--cristal-3);
  border-color: var(--borde-fuerte);
  color: var(--texto-3);
}

.hora-par .boton { width: 100%; justify-content: center; }

/* ---- confirmacion de reserva ---- */

.reserva-hecha-cuando {
  margin: 0 0 var(--e-3);
  font-size: var(--t-l);
  color: var(--texto);
}

.reserva-hecha-cuando::first-letter { text-transform: uppercase; }

.reserva-hecha-anfitrion {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--cristal-2);
  color: var(--texto);
  font-weight: var(--peso-medio);
  margin-bottom: var(--e-3);
}

.punto-color {
  width: 10px;
  height: 10px;
  border-radius: var(--r-redondo);
  background: var(--color-punto, var(--acento));
  flex: none;
  display: inline-block;
}

/* ---- buscador de leads del modal ---- */

.lista-leads {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  max-height: 320px;
  overflow-y: auto;
  margin-top: var(--e-3);
}

.lista-lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--cristal);
  text-align: left;
  cursor: pointer;
  font-family: var(--fuente);
  transition: background var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva);
}

.lista-lead:hover { background: var(--cristal-2); }
.lista-lead.elegido { border-color: var(--acento); background: var(--acento-tenue); }
.lista-lead-nombre { font-size: var(--t-s); color: var(--texto); font-weight: var(--peso-medio); }
.lista-lead-meta { font-size: var(--t-xs); color: var(--texto-4); }

/* ============================================================ disponibilidad */

.disp-cuadro {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  min-width: 0;
}

.disp-persona {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-3);
}

.disp-persona > div { display: flex; flex-direction: column; }

.disp-persona-nombre {
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  color: var(--texto);
}

.disp-persona-rol { font-size: var(--t-xs); color: var(--texto-3); display: inline; }

.disp-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.disp-subtitulo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-6) 0 var(--e-3);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
}

.disp-subtitulo h3 {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--t-m);
  color: var(--texto);
  font-weight: var(--peso-fuerte);
}

.disp-subtitulo .boton { margin-left: auto; }

/* ---- horario semanal ---- */

.horario {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-top: var(--e-4);
}

.horario-dia {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--cristal);
}

.horario-dia.trabaja { border-color: var(--borde); background: var(--cristal-2); }

.horario-nombre { display: flex; flex-direction: column; }
.horario-nombre-largo { font-size: var(--t-s); color: var(--texto-2); font-weight: var(--peso-medio); }
.horario-nombre-corto { display: none; }

.horario-tramos { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; }

.horario-tramo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.horario-tramo .campo-hora {
  width: 108px;
  font-variant-numeric: tabular-nums;
}

.horario-a { font-size: var(--t-xs); color: var(--texto-4); }

.horario-libre { margin: 0; font-size: var(--t-xs); color: var(--texto-4); }

.horario-acciones { display: flex; gap: var(--e-2); justify-content: flex-end; }

/* ---- bloqueos ---- */

.bloqueos { display: flex; flex-direction: column; gap: var(--e-2); }

.bloqueo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--cristal);
}

/* ---- tabla de reparto ---- */

.disp-equipo .tabla td { vertical-align: middle; }
.disp-equipo .tabla .interruptor { justify-content: center; }

/* ============================================================ pantallas estrechas */

@media (max-width: 1240px) {
  .cita-cuadro { grid-template-columns: 320px minmax(0, 1fr); max-width: 800px; }
  .cita-horas {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--borde);
  }
  .horas-cuerpo {
    max-height: none;
    padding: var(--e-5) var(--e-6);
  }
  .horas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .hora-par { grid-column: span 2; }
}

@media (max-width: 780px) {
  .cita-cuadro { grid-template-columns: minmax(0, 1fr); }

  /* En el movil manda el calendario: primero de que cita va, luego dia y hora,
     y el lead y las notas debajo, que es donde se rellenan sin prisa. */
  .cita-ficha { display: contents; }
  .cita-ficha-cabecera {
    order: 0;
    padding: var(--e-5) var(--e-4) var(--e-4);
    border-bottom: 1px solid var(--borde);
    background: var(--cristal);
  }
  .cita-calendario { order: 1; }
  .cita-horas { order: 2; }
  .cita-ficha-form {
    order: 3;
    padding: var(--e-5) var(--e-4);
    border-top: 1px solid var(--borde);
  }
  .cita-calendario { padding: var(--e-5) var(--e-4); }
  .horas-cuerpo { padding: var(--e-4); }
  .horas-lista { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
  .cal-dia { min-height: 40px; font-size: var(--t-s); }

  .horario-dia { grid-template-columns: 56px minmax(0, 1fr); }
  .horario-nombre-largo { display: none; }
  .horario-nombre-corto { display: inline; font-size: var(--t-s); color: var(--texto-2); font-weight: var(--peso-medio); }
  .horario-acciones { grid-column: 1 / -1; justify-content: flex-start; }

  .bloqueo { grid-template-columns: minmax(0, 1fr); }
}