/* ==========================================================================
   ANDRIUH — Capa visual sobre el sistema de reservas
   --------------------------------------------------------------------------
   Refinar, no reinventar. Aquí NO se cambia la estructura de pasos ni la
   interacción: solo tipografía, color, aire y jerarquía. Una clienta habitual
   tiene que reconocer la pantalla al primer vistazo.

   Se carga DESPUÉS de reservas.css a propósito, para poder ajustar lo que
   aquel deja puesto sin tener que editarlo.
   ========================================================================== */

/* --- Lienzo ------------------------------------------------------------- */

body.reservas-page,
.reservas-container {
  background-color: var(--crema);
}

.reservas-card,
.booking-card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-sutil);
}

/* --- Títulos ------------------------------------------------------------ */

.main .header-section h1,
.main-container h1,
.main-container h2 {
  font-family: var(--fuente-display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--tinta);
}

/* El marrón de marca no llega a 4.5:1 sobre crema: fuera de los textos. */
.main .header-section h1 i { color: var(--topo); }

.form-label,
.filtros-section label {
  font-family: var(--fuente-texto);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-media);
}

/* ==========================================================================
   Selector de profesional — el cambio con más sentido de esta pantalla
   --------------------------------------------------------------------------
   Antes salían las ocho revueltas en una fila, de modo que era imposible saber
   quién presta cada servicio. Ahora van en dos grupos rotulados, con idéntico
   diseño en ambos.
   ========================================================================== */

/* Los grupos se APILAN, no compiten por el ancho: en una sola fila el rótulo
   del segundo se cortaba y los seis independientes no cabían. */
.profesionales-scroll {
  flex-direction: column;
  align-items: stretch;
  gap: var(--e4);
  overflow-x: visible;
  /* Es un hijo flex del wrapper: sin esto se encoge a su contenido (276px
     dentro de 592) y la rejilla se queda en tres columnas. */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* Con los grupos apilados las flechas laterales ya no aplican. */
.profesionales-wrapper .scroll-arrow { display: none; }

.prof-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  /* Sin esto un elemento flex no baja de su contenido minimo y la fila se
     salia de la tarjeta (688px dentro de 592px). */
  min-width: 0;
}

.prof-grupo + .prof-grupo {
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}

/* Rejilla en vez de fila desplazable: se reparte el ancho que haya, envuelve
   sola y no puede desbordar. Ademas nada queda escondido tras un scroll que
   hay que adivinar. */
.prof-grupo__fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--e3) var(--e1);
  justify-items: center;
}

/* "Ver todas" no es una persona: se separa y se rebaja. */
.profesionales-scroll > .profesional-card {
  align-self: flex-start;
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: auto;
  padding: var(--e2) var(--e4) var(--e2) var(--e2);
  border: 1px solid var(--linea);
  border-radius: var(--r-full);
}
.profesionales-scroll > .profesional-card .profesional-name { font-size: var(--t-pequeno); }
.profesionales-scroll > .profesional-card .profesional-avatar { width: 34px; height: 34px; }

/* --- Tarjeta de profesional ---------------------------------------------
   Se ensancha: con 75px el cargo se partía en seis líneas. Y el avatar sube
   de 50 a 68px, que las miniaturas diminutas eran una de las cosas que el
   encargo pedía evitar. */
/* La ficha la dimensiona la rejilla: aqui solo se limita para que una palabra
   larga ("Micropigmentadora") no imponga su ancho minimo. */
.prof-grupo .profesional-card {
  width: 100%;
  min-width: 0;
  max-width: 108px;
  padding: var(--e2) var(--e2) var(--e3);
  border-radius: var(--r-m);
  transition: background-color var(--transicion);
}
.prof-grupo .profesional-card:hover { background: var(--arena-suave); }

.prof-grupo .profesional-avatar {
  width: 56px;
  height: 56px;
  border: 1px solid var(--linea);
  box-shadow: none;
}

.profesional-card.selected .profesional-avatar {
  outline: 2px solid var(--topo-oscuro);
  outline-offset: 2px;
  border-color: transparent;
}

.profesional-avatar--todas {
  background: var(--arena);
  color: var(--topo-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profesional-name {
  font-family: var(--fuente-texto);
  font-size: var(--t-pequeno);
  font-weight: 500;
  color: var(--tinta);
  margin-top: var(--e2);
}

/* El cargo informa, pero no puede descuadrar la fila: dos líneas y elipsis. */
.profesional-cargo {
  font-size: var(--t-micro);
  color: var(--tinta-media);
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.profesional-name { overflow-wrap: anywhere; }

.profesional-card.selected .profesional-name { font-weight: 600; }

/* La rejilla ya se adapta sola a cualquier ancho: no hace falta un tamaño
   distinto por dispositivo. */

/* ==========================================================================
   Botones
   ========================================================================== */

.reservas-container .btn-primary,
.booking-modal .btn-primary {
  background: var(--topo-oscuro);
  border-color: var(--topo-oscuro);
  color: var(--blanco);
  border-radius: var(--r-full);
  font-family: var(--fuente-texto);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.reservas-container .btn-primary:hover,
.booking-modal .btn-primary:hover {
  background: var(--tinta);
  border-color: var(--tinta);
}

/* ==========================================================================
   Calendario y horas
   ========================================================================== */

.calendar-header,
.calendario-mes {
  font-family: var(--fuente-display);
  font-variation-settings: 'SOFT' 30, 'WONK' 0;
  color: var(--tinta);
}

.slot-btn {
  font-family: var(--fuente-texto);
  font-variant-numeric: tabular-nums;
  border-radius: var(--r-full);
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta);
  background: var(--blanco);
  transition: background-color var(--transicion), border-color var(--transicion);
}
.slot-btn:hover { background: var(--arena-suave); border-color: var(--topo); }
.slot-btn.selected {
  background: var(--topo-oscuro);
  border-color: var(--topo-oscuro);
  color: var(--blanco);
}

/* ==========================================================================
   Aviso de quien presta el servicio
   --------------------------------------------------------------------------
   Aparece cuando el servicio elegido determina a la profesional. Es el momento
   en que hay que decir que, si es independiente, lo presta, cobra y factura
   ella. No es un cartel de advertencia: se integra como un dato mas.
   ========================================================================== */

.prestador-aviso {
  /* Con aire por abajo tambien: .calendario-section no trae margen superior,
     asi que el aviso quedaba pegado al nombre del mes y se leian como una
     sola cosa. */
  margin: var(--e5) 0 var(--e6);
  padding: var(--e4) var(--e5);
  background: var(--arena-suave);
  border-left: 2px solid var(--topo);
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.prestador-aviso[hidden] { display: none; }

.prestador-aviso .atribucion { margin-bottom: var(--e2); }

.prestador-aviso p {
  margin: 0;
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  line-height: 1.55;
  max-width: none;
}

.prestador-aviso strong { color: var(--tinta); font-weight: 500; }

/* ==========================================================================
   Elegir profesional: primero la decision, luego las personas
   --------------------------------------------------------------------------
   "Cualquiera" como una tarjeta mas entre caras chirriaba, porque no es una
   persona: es no tener preferencia. Ahora son dos opciones claras y las caras
   solo aparecen si de verdad quiere elegir.
   ========================================================================== */

.prof-modo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3);
  width: 100%;
}

.prof-modo__op {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--e4) var(--e5);
  background: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m);
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-texto);
  transition: border-color var(--transicion), background-color var(--transicion);
}
.prof-modo__op:hover { border-color: var(--topo); background: var(--arena-suave); }

.prof-modo__op.activa {
  border-color: var(--topo-oscuro);
  box-shadow: inset 0 0 0 1px var(--topo-oscuro);
  background: var(--arena-suave);
}

.prof-modo__titulo {
  font-size: var(--t-cuerpo);
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.3;
}

.prof-modo__pie {
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  line-height: 1.4;
}

.prof-grupos { width: 100%; margin-top: var(--e5); }
.prof-grupos[hidden] { display: none; }


/* ===========================================================================
   Mosaico de categorias en la reserva
   ---------------------------------------------------------------------------
   Antes eran dos desplegables encadenados: elegias categoria a ciegas y el
   precio no aparecia hasta despues. Aqui la categoria se toca y los servicios
   salen en lista con duracion y precio a la vista.

   La diferencia con el mosaico de la portada es que este es un CONTROL, no un
   escaparate: en cuanto eliges, se pliega a una sola linea y devuelve toda la
   altura al calendario, que es lo que de verdad escasea en esta pantalla.
   =========================================================================== */

.rsv-cats { margin-top: var(--e3); }

/* Cuatro por fila: con menos teselas cada icono puede ser grande y siguen
   leyendose de un vistazo. El resto entra con "ver todas". */
.rsv-cats__mosaico {
  display: grid;
  /* minmax(0,1fr) por lo mismo que en la portada. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e5) var(--e3);
}

.rsv-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e1);
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--fuente-texto);
  border-radius: 10px;
  transition: background var(--transicion);
}
.rsv-cat:hover { background: rgba(43, 37, 33, 0.04); }

/* Igual que en la portada: va DESPUES de .rsv-cat porque comparten
   especificidad y si no el display:flex de arriba lo anularia. */
.rsv-cat--extra { display: none; }
.rsv-cats--todas .rsv-cat--extra { display: flex; }

.rsv-cat__icono {
  display: block;
  color: var(--topo);
  transition: color var(--transicion), transform var(--transicion);
}
.rsv-cat__icono svg,
.rsv-cat__icono img {
  width: 54px;
  height: 54px;
  display: block;
  fill: currentColor;
  object-fit: contain;
}
.rsv-cat:hover .rsv-cat__icono { color: var(--tinta); transform: translateY(-2px); }

.rsv-cat__nombre {
  font-size: var(--t-pequeno);
  color: var(--tinta);
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rsv-cats__pie { display: flex; justify-content: center; margin-top: var(--e4); }

/* --- Categoria ya elegida: el mosaico se sustituye por esta linea --- */
.rsv-cat-elegida {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--filete);
  border-radius: 12px;
  background: var(--crema);
}
.rsv-cat-elegida__icono { color: var(--topo-oscuro); flex-shrink: 0; }
.rsv-cat-elegida__icono svg,
.rsv-cat-elegida__icono img { width: 34px; height: 34px; display: block; fill: currentColor; object-fit: contain; }
.rsv-cat-elegida__nombre { flex: 1; min-width: 0; font-size: var(--t-base); color: var(--tinta); }
.rsv-cat-elegida__cambiar {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: var(--t-pequeno);
  color: var(--tinta-media);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rsv-cat-elegida__cambiar:hover { color: var(--tinta); }

/* --- Lista de servicios de la categoria --- */
.rsv-servicios { margin-top: var(--e3); display: flex; flex-direction: column; gap: 6px; }

.rsv-servicio {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3);
  background: none;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--filete);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-texto);
  transition: background var(--transicion), border-color var(--transicion);
}
.rsv-servicio:hover { background: rgba(43, 37, 33, 0.04); }
.rsv-servicio.elegido {
  border-color: var(--topo);
  background: var(--crema);
}

.rsv-servicio__nombre { flex: 1; min-width: 0; font-size: var(--t-base); color: var(--tinta); line-height: 1.35; }
.rsv-servicio__duracion { font-size: var(--t-pequeno); color: var(--tinta-media); white-space: nowrap; }
.rsv-servicio__precio { font-size: var(--t-base); color: var(--tinta); font-weight: 500; white-space: nowrap; }

.rsv-vacio { padding: var(--e4); text-align: center; color: var(--tinta-media); font-size: var(--t-pequeno); }

@media (max-width: 560px) {
  /* Dos por fila en movil: a cuatro, los nombres largos se parten en cuatro
     lineas y la fila queda mas alta que el propio icono. */
  .rsv-cats__mosaico { grid-template-columns: repeat(2, 1fr); gap: var(--e4) var(--e2); }
  .rsv-cat__icono svg, .rsv-cat__icono img { width: 48px; height: 48px; }
  .rsv-servicio { flex-wrap: wrap; gap: 4px var(--e2); }
  .rsv-servicio__nombre { flex-basis: 100%; }
  /* El precio, al borde derecho: es la columna que se compara de un vistazo,
     y pegado a la duracion habia que leer linea por linea para encontrarlo. */
  .rsv-servicio__precio { margin-left: auto; }
}

/* --- Lista de servicios: acotada, y plegada del todo al elegir ---------------
   Cuatro categorias pasan de diez servicios y la lista entera empujaba el
   calendario muy abajo. Se ven cinco (los mas pedidos) y el resto entra con un
   "ver los N restantes". En cuanto hay servicio elegido se ocultan los demas:
   ya no hay nada que comparar y la altura vuelve al calendario.

   Las reglas de ocultar van DESPUES de .rsv-servicio, que comparte
   especificidad: puestas antes, su display las anularia. */
.rsv-servicio--extra { display: none; }
.rsv-servicios--todos .rsv-servicio--extra { display: flex; }

.rsv-servicios--elegida .rsv-servicio:not(.elegido) { display: none; }
.rsv-servicios--elegida .rsv-servicios__mas { display: none; }

.rsv-servicios__pie {
  display: flex;
  justify-content: center;
  gap: var(--e4);
  margin-top: var(--e2);
}
/* "Cambiar servicio" solo tiene sentido cuando hay uno elegido. */
.rsv-servicios__cambiar { display: none; }
.rsv-servicios--elegida .rsv-servicios__cambiar { display: inline-flex; }

/* El boton de quitar la fila es absoluto, a la derecha, con un top calculado
   para el formulario de antes (etiqueta + input). Con el mosaico caia justo
   encima de "Cambiar": dos zonas de toque superpuestas. Se le reserva columna
   propia y se centra con la linea de la categoria. */
.service-row.has-delete .rsv-paso { padding-right: 40px; }
.service-row.has-delete .btn-remove-service { top: 14px; }

/* --- Bonos y promociones -----------------------------------------------------
   No es una categoria de servicios (no tiene citas propias, asi que no entra en
   el orden por demanda), pero comercialmente interesa que se vea. Va como fila
   propia bajo el mosaico: siempre visible y sin descuadrar la rejilla de 4. */
.rsv-bonos {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  margin-top: var(--e5);
  padding: var(--e3) var(--e4);
  background: var(--arena-suave);
  border: 1px solid var(--filete);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--fuente-texto);
  transition: border-color var(--transicion), background var(--transicion);
}
.rsv-bonos:hover { border-color: var(--topo); }
.rsv-bonos__icono { color: var(--topo-oscuro); flex-shrink: 0; }
.rsv-bonos__icono svg,
.rsv-bonos__icono img { width: 38px; height: 38px; display: block; fill: currentColor; object-fit: contain; }
.rsv-bonos__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rsv-bonos__titulo { font-size: var(--t-base); color: var(--tinta); }
.rsv-bonos__pie { font-size: var(--t-pequeno); color: var(--tinta-media); }
.rsv-bonos__flecha { color: var(--topo); font-size: 0.8rem; flex-shrink: 0; }

/* Zonas tactiles: los enlaces del selector se quedaban en 28-36 px de alto y la
   recomendacion son 44. Se agranda el area sensible con padding, sin tocar el
   tamano de la letra, para no cambiar el aspecto. */
.rsv-cats__pie .cat-vertodas,
.rsv-servicios__pie .cat-vertodas {
  min-height: 44px;
  padding: 0 var(--e3);
  display: inline-flex;
  align-items: center;
}
.rsv-cat-elegida__cambiar {
  min-height: 44px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* Rotulo de la fila cuando hay varios servicios */
.rsv-paso__rotulo {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-media);
  margin-bottom: var(--e2);
}