/* css/kaizen.css
   Variables + reset base + nav compartido para las paginas publicas del rediseno
   (index.php, nosotros.php, nuestro_equipo.php, especialidades.php, sedes.php).
   Antes esto vivia duplicado (con pequenas variaciones) dentro de <style> inline en cada
   pagina. Centralizado aca para que un restyle futuro (Vicky, brief seccion 7) sea barato:
   basta con tocar estas variables en vez de buscar cada hex suelto pagina por pagina.
   El flujo transaccional (servicio.php, subServicios.php, profesionales.php, sede.php,
   fecha.php, paciente.php, confirmacion.php) tambien usa este archivo desde aca: ver seccion
   "FLUJO DE RESERVA" mas abajo -- ya no queda en el Bootstrap/css/estilos.css viejo (Montserrat,
   tema oscuro) que tenia antes, sin relacion visual con el resto del sitio. */

:root {
  --violeta: #99569E;
  --violeta-dark: #7c3aed;
  --violeta-footer-texto: #6b2870;
  --gris: #2D2E2B;
  --gris-claro: #faf9fa;
  --blanco: #fff;
  --transition-default: 0.25s cubic-bezier(.44,.34,0,1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--violeta) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: var(--violeta); border-radius: 3px; }

html, body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--blanco);
  color: var(--gris);
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* Footer pegado siempre al final de la ventana ("sticky footer"): sin esto, en paginas con
   poco contenido (ej. profesionales.php con el estado "elegi un profesional", o formularios
   cortos de login/registro) el footer quedaba flotando arriba de donde termina el contenido,
   dejando un tramo de fondo en blanco debajo antes del borde real de la pantalla. body pasa a
   ser una columna flex; el bloque de contenido de cada pagina (.main-content, .flow-shell,
   .kaizen-auth-main) crece para ocupar el espacio libre y empuja el footer hasta el fondo. Un
   <nav> con position:fixed (paginas con menu completo) queda fuera del flujo igual, asi que no
   participa de este flex y no hace falta tratarlo aparte. */
html { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.site-footer { flex-shrink: 0; }

a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }

/* NAVBAR */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.navbar {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo a { display: flex; align-items: center; }
.nav-logo-img { height: 44px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100%;
}

.nav-link {
  background: none;
  border: none;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--violeta);
  transition: color var(--transition-default);
}

.nav-link:hover, .nav-link.active { color: var(--violeta-dark); }
.nav-link.active { font-weight: 700; }

/* Login, dentro de la barra desktop, es un link simple en negrita -- no un boton/pildora
   (a diferencia del estado "logueado", que conserva su pildora .light sin cambios). */
.navbar .kaizen-account-pill:not(.light) {
  background: none;
  color: var(--gris);
  padding: 0;
  box-shadow: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 1.05rem;
}
.navbar .kaizen-account-pill:not(.light):hover { color: var(--violeta); }

.btn-nav {
  display: inline-block;
  background: var(--violeta);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: background var(--transition-default);
}

.btn-nav:hover { background: var(--violeta-dark); }
.btn-nav.secondary { background: #fff; color: var(--violeta); border: 1px solid rgba(153,86,158,.25); }
.btn-nav.secondary:hover { background: #f7eff9; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gris);
}

.mobile-menu { display: none; padding-bottom: 1rem; }
.mobile-menu.active { display: block; }

.mobile-menu .nav-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0;
}

.mobile-menu .btn-nav { width: 100%; margin-top: 0.5rem; }

.mobile-menu .kaizen-account-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mobile-menu .kaizen-account-pill,
.mobile-menu .kaizen-account-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .navbar { height: auto; min-height: 64px; padding: 0.4rem 0; }
  .nav-logo-img { height: 34px; }
  .menu-toggle { display: block; }
}

.main-content { padding-top: 68px; flex: 1 0 auto; width: 100%; }

/* FOOTER (compartido por todas las paginas publicas informativas, ver
   partials/footer_publico.php). Una unica franja violeta, copiada tal cual del diseno de
   referencia del cliente (img/Footer-completo.png): direccion a la izquierda, logo centrado,
   Instagram a la derecha -- sin segunda franja de copyright/legales. */
.site-footer { background: var(--violeta); }

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 1rem;
}

.footer-sede {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--violeta-footer-texto);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
/* Icono de pin agrandado (pedido del cliente, img/Footer-completo.png): en el diseno de
   referencia el pin es casi tan alto como las 2 lineas de direccion juntas. */
.footer-sede i { font-size: 1.9rem; }
.footer-sede strong { font-weight: 700; }

.footer-logo { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.footer-logo img { height: 72px; width: auto; }

.footer-instagram {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--violeta-footer-texto);
  font-size: 0.95rem;
  font-weight: 700;
  transition: opacity var(--transition-default);
}
.footer-instagram:hover { opacity: 0.75; }

@media (max-width: 768px) {
  .footer-row { flex-direction: column; text-align: center; padding: 1.5rem 1rem; }
  .footer-logo { order: -1; }
  .footer-logo img { height: 60px; }
}

/* ===================================================================================
   BANNER DE PROFESIONAL (mark de area + foto + nombre + sede + servicios): usado en
   profesionales.php, ficha del profesional con mas de una combinacion servicio/sub_servicio.
   Replica pixel a pixel la referencia final del cliente (WhatsApp Image 2026-09-25 10.56.21,
   tarjeta de abajo de la comparacion) -- una version mas BAJA/compacta que la primera pasada de
   este banner, lograda achicando el padding vertical de la tarjeta y el espacio entre servicios,
   NO achicando las fuentes/foto a lo tonto (mark, foto, nombre y servicios casi al mismo tamaño
   que antes, apenas un toque menores). Mismos colores por area que team-area-panel en
   nuestro_equipo.php (medica bg #C0949E/texto #996666, kinesica bg #D7D0CE/texto violeta,
   terapia manual bg violeta/texto #6C3E71). */
.prof-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
  max-width: 1180px;
  margin: 0 auto 3rem;
  padding: 1.5rem 2.25rem;
  border-radius: 1.25rem;
}
.prof-banner--medica { background: #C0949E; }
.prof-banner--kinesica { background: #D7D0CE; }
.prof-banner--terapia { background: var(--violeta); }

.prof-banner-mark { flex-shrink: 0; color: #fff; }
.prof-banner--kinesica .prof-banner-mark { color: var(--violeta); }
.prof-banner-mark .mark { font-size: 3.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: currentColor; }
.prof-banner-mark .label { font-size: 1rem; font-weight: 400; margin-top: .35rem; color: currentColor; }
.prof-banner-mark .label strong { font-weight: 700; }
.prof-banner-mark .divider { width: 36px; height: 3px; margin-top: .85rem; background: currentColor; }

.prof-banner-person { display: flex; align-items: center; gap: 1.15rem; }
.prof-banner-photo { width: 108px; height: 108px; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,.35); }
.prof-banner-photo img { width: 100%; height: 100%; object-fit: cover; }
.prof-banner-name { font-size: 1.55rem; font-weight: 800; line-height: 1.15; margin-bottom: .2rem; }
.prof-banner--medica .prof-banner-name, .prof-banner--medica .prof-banner-sede { color: #996666; }
.prof-banner--kinesica .prof-banner-name, .prof-banner--kinesica .prof-banner-sede { color: var(--violeta); }
.prof-banner--terapia .prof-banner-name, .prof-banner--terapia .prof-banner-sede { color: #6C3E71; }
.prof-banner-sede { font-size: 1rem; font-weight: 400; }
.prof-banner-sede strong { font-weight: 700; }

.prof-banner-services { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.prof-banner-services li { font-size: 1.05rem; font-weight: 400; color: #fff; }
.prof-banner-services li strong { font-weight: 700; }
.prof-banner-services li em { font-style: italic; font-weight: 400; }

@media (max-width: 640px) {
  .prof-banner { flex-direction: column; align-items: center; text-align: center; padding: 1.75rem 1.5rem; }
  .prof-banner-person { flex-direction: column; }
  .prof-banner-services { margin: 0 auto; align-items: center; }
  .prof-banner-mark .mark { font-size: 3rem; }
  .prof-banner-photo { width: 100px; height: 100px; }
}

/* ===================================================================================
   FLUJO DE RESERVA (sede.php, servicio.php, subServicios.php, profesionales.php,
   fecha.php, paciente.php, confirmacion.php). Usan el header reducido
   (kaizen_render_simple_public_header(), en pacientes_auth.php) en vez del nav completo --
   eso es intencional (asimetria durante la reserva, ver MAPA_KAIZEN.md), pero visualmente
   tienen que sentirse parte del mismo sitio: misma tipografia (Inter), misma paleta violeta,
   mismas tarjetas/botones que el resto del rediseno. Todas estas paginas cierran con
   kaizen_render_footer_publico(), igual que las paginas informativas. */

.flow-shell { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; flex: 1 0 auto; width: 100%; }

.flow-title { text-align: center; font-size: 1.75rem; font-weight: 700; color: var(--gris); margin-bottom: .5rem; }
.flow-subtitle { text-align: center; color: #6b7280; font-size: 1rem; margin-bottom: 2.5rem; }
.flow-divider { width: 64px; height: 3px; background: var(--violeta); margin: 0 auto 2.5rem; border-radius: 2px; }

.flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }

.flow-card { display: flex; flex-direction: column; background: #fff; border: none; text-align: left; padding: 0; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 6px 24px rgba(153,86,158,.12); transition: transform var(--transition-default), box-shadow var(--transition-default); text-decoration: none; color: inherit; cursor: pointer; width: 100%; }
.flow-card:hover, .flow-card:focus-visible { transform: translateY(-6px); box-shadow: 0 12px 38px rgba(153,86,158,.2); }

.flow-card-img { width: 100%; height: 170px; object-fit: cover; background: #eee; display: block; }
.flow-card-body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.flow-card-eyebrow { text-transform: uppercase; font-size: .75rem; font-weight: 700; color: var(--violeta); letter-spacing: .05em; margin-bottom: .35rem; }
.flow-card-title { font-size: 1.1rem; font-weight: 700; color: var(--gris); margin-bottom: .4rem; }
.flow-card-desc { font-size: .9rem; color: #666; line-height: 1.5; flex-grow: 1; }
.flow-card-hint { font-size: .85rem; color: #8a7090; font-style: italic; margin-top: .5rem; }

.flow-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.flow-card-price { font-weight: 700; color: var(--violeta); white-space: nowrap; }

/* Profesionales: tarjeta con foto circular + nombre, mas compacta que flow-card. */
.flow-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.flow-person-card { display: flex; flex-direction: column; align-items: center; gap: .75rem; background: none; border: none; padding: 1rem; border-radius: 1.25rem; text-align: center; cursor: pointer; transition: background var(--transition-default), transform var(--transition-default); text-decoration: none; color: inherit; }
.flow-person-card:hover, .flow-person-card:focus-visible { background: #f8f4fb; transform: translateY(-4px); }
.flow-person-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #eee; }
.flow-person-photo img { width: 100%; height: 100%; object-fit: cover; }
.flow-person-name { font-weight: 700; color: var(--gris); font-size: .95rem; line-height: 1.3; }

.flow-empty { max-width: 560px; margin: 1rem auto; background: #fff; border-radius: 1.25rem; padding: 2.25rem 2rem; text-align: center; box-shadow: 0 6px 24px rgba(153,86,158,.12); }
.flow-empty p { color: var(--gris); font-size: 1.05rem; margin-bottom: 1rem; }
.flow-empty hr { border: none; border-top: 1px solid #eee; margin: 1.25rem 0; }
.flow-empty a { color: var(--violeta); font-weight: 700; }

.flow-whatsapp-btn { display: inline-flex; align-items: center; gap: .5rem; background: #25d366; color: #fff; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .9rem; transition: background var(--transition-default), transform var(--transition-default); }
.flow-whatsapp-btn:hover { background: #20b954; transform: translateY(-1px); color: #fff; }

.flow-combo-list { list-style: none; max-width: 520px; margin: 0 auto; }
.flow-combo-list label { display: block; background: #fff; border: 1px solid #e2d7e6; border-radius: .9rem; padding: 1rem 1.15rem; margin-bottom: .75rem; cursor: pointer; font-weight: 500; color: var(--gris); transition: border-color var(--transition-default); }
.flow-combo-list label:hover { border-color: var(--violeta); }
.flow-combo-list input { margin-right: .6rem; accent-color: var(--violeta); }

@media (max-width: 640px) {
  .flow-shell { padding: 2rem 1.25rem 3rem; }
  .flow-title { font-size: 1.4rem; }
}

/* fecha.php: el calendario y el selector de hora, con la misma tarjeta blanca/sombra/radio
   que el resto de las tarjetas del flujo (.flow-card, .flow-empty) en vez del flatpickr
   "pelado" que tenia antes. 80% de ancho en desktop (pedido del cliente) para que se sienta
   una pieza central y no un widget chico perdido en la pagina; en mobile se estira a 100%
   porque el 80% de una pantalla chica queda demasiado angosto para tocar los dias con el dedo.
   display:flex + margin:0 auto en el calendario mismo (no solo en el contenedor) es lo que
   garantiza que quede centrado en mobile -- flatpickr en modo inline arma su propio elemento
   con ancho fijo que, sin esto, no se centraba solo dentro del contenedor. */
.flow-calendar-card {
  width: 80%;
  max-width: 780px;
  min-width: 320px;
  margin: 0 auto 3rem;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 12px 40px rgba(153,86,158,.14);
  overflow: hidden;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 640px) {
  .flow-calendar-card { width: 100%; min-width: 0; padding: 0 .75rem 1.25rem; border-radius: 1.25rem; }
}

/* El input de texto de flatpickr (y su alt-input generado) no aportan nada en modo inline --
   la interaccion real es clickear un dia del calendario. */
.flow-calendar-card input { display: none; }

/* Flatpickr arma su calendario con anchos fijos en pixeles pensados para un widget chico de
   formulario -- estos overrides lo estiran a ocupar el 100% de la tarjeta (que ahora es ancha)
   y agrandan cada celda de dia en proporcion, en vez de dejar un calendario chico con un
   montón de aire vacío alrededor. */
.flow-calendar-card .flatpickr-calendar,
.flow-calendar-card .flatpickr-innerContainer,
.flow-calendar-card .flatpickr-rContainer,
.flow-calendar-card .flatpickr-days,
.flow-calendar-card .dayContainer {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}

.flow-calendar-card .flatpickr-calendar { margin: 0 auto; box-shadow: none; }

/* Cabecera del mes: flatpickr la arma con position:absolute (el nombre del mes centrado por
   left:12.5%/width:75% "a ojo", asumiendo una altura fija de fabrica) -- en cuanto se le toca
   el padding/alto para el resto del rediseño, ese calculo se rompe y el mes queda mal ubicado
   o cortado. Se pisa ese posicionamiento por uno propio con flex, mas robusto. */
.flow-calendar-card .flatpickr-months {
  background: var(--violeta);
  border-radius: .9rem .9rem 0 0;
}
.flow-calendar-card .flatpickr-month {
  height: auto;
  padding: .65rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-calendar-card .flatpickr-current-month {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: auto;
  left: auto;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0;
  white-space: nowrap;
}
.flow-calendar-card .flatpickr-current-month .numInputWrapper { width: 4.5em; }
.flow-calendar-card .flatpickr-current-month .flatpickr-monthDropdown-months,
.flow-calendar-card .flatpickr-current-month input.cur-year { color: #fff; font-weight: 700; font-size: inherit; }
.flow-calendar-card .flatpickr-current-month .flatpickr-monthDropdown-months option { color: #333; }

.flow-calendar-card .flatpickr-prev-month,
.flow-calendar-card .flatpickr-next-month {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: .45rem !important;
  border-radius: 999px;
  transition: background var(--transition-default);
}
.flow-calendar-card .flatpickr-prev-month { left: .5rem; }
.flow-calendar-card .flatpickr-next-month { right: .5rem; }
.flow-calendar-card .flatpickr-prev-month:hover,
.flow-calendar-card .flatpickr-next-month:hover { background: rgba(255,255,255,.2); }
.flow-calendar-card .flatpickr-prev-month svg,
.flow-calendar-card .flatpickr-next-month svg { width: 14px; height: 14px; fill: #fff; }

.flow-calendar-card .flatpickr-weekdays { background: var(--violeta); }
.flow-calendar-card span.flatpickr-weekday {
  background: var(--violeta);
  color: rgba(255,255,255,.9);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem 0;
}

.flow-calendar-card .flatpickr-days { border: none; }

/* Celdas de dia: alto fijo chico (no aspect-ratio:1, que con la tarjeta ancha del 80%
   terminaba dando dias cuadrados enormes e inflaba muchisimo el alto total). */
.flow-calendar-card .flatpickr-day {
  height: 2.35rem;
  line-height: 2.35rem;
  max-width: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 500;
  color: var(--gris);
  border-radius: .6rem;
  margin: .1rem 0;
  transition: background var(--transition-default), color var(--transition-default);
}

.flow-calendar-card .flatpickr-day:hover:not(.disabled):not(.flatpickr-disabled):not(.selected) {
  background: #f3e8f6;
  border-color: transparent;
}

.flow-calendar-card .flatpickr-day.today {
  border: 2px solid var(--violeta);
  font-weight: 700;
}
.flow-calendar-card .flatpickr-day.today:hover { color: var(--gris); }

.flow-calendar-card .flatpickr-day.selected,
.flow-calendar-card .flatpickr-day.selected:hover {
  background: var(--violeta);
  border-color: var(--violeta);
  color: #fff;
  font-weight: 700;
}

/* Dias bloqueados (fuera de los dias que atiende el profesional, o desactivados a mano desde
   el panel): gris neutro y tachado, sin ninguna variacion de rosa/rojo que se pueda confundir
   con la marca o con un estado de error. Flatpickr le pone la clase "flatpickr-disabled" a
   estos dias (no "disabled" a secas, que es la que se habia usado antes) -- por eso no
   tomaban ningun estilo propio y quedaban con el gris casi invisible por defecto de la
   libreria en vez del gris del diseño. Se cubren las dos variantes de clase por las dudas. */
.flow-calendar-card .flatpickr-day.disabled,
.flow-calendar-card .flatpickr-day.disabled:hover,
.flow-calendar-card .flatpickr-day.flatpickr-disabled,
.flow-calendar-card .flatpickr-day.flatpickr-disabled:hover {
  background: #eef0f2 !important;
  color: #9aa0a6 !important;
  border-color: transparent !important;
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 1 !important;
}

.flow-calendar-card .flatpickr-day.prevMonthDay,
.flow-calendar-card .flatpickr-day.nextMonthDay {
  color: #d5d5d5;
}

@media (max-width: 640px) {
  .flow-calendar-card .flatpickr-day { height: 2.1rem; line-height: 2.1rem; font-size: .88rem; border-radius: .5rem; }
  .flow-calendar-card .flatpickr-current-month { font-size: .95rem; }
  .flow-calendar-card .flatpickr-month { padding: .5rem 2.1rem; }
}

@media (max-width: 420px) {
  .flow-calendar-card { padding: 1rem .75rem; }
}

/* Modal de horarios: mismo lenguaje visual que las tarjetas del sitio (radio grande, sombra
   suave) en vez del recuadro chico con esquinas de 10px que tenia antes. */
.flow-time-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,46,43,.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  padding: 1rem;
}

.flow-time-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  width: min(380px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 1.75rem;
  text-align: center;
}

.flow-time-title { font-weight: 700; font-size: 1.15rem; color: var(--gris); margin-bottom: .35rem; }
.flow-time-fecha { font-weight: 500; color: var(--violeta); margin-bottom: 1.25rem; }

.flow-time-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-height: 260px; overflow-y: auto; padding: .25rem; margin-bottom: 1.25rem; }

.flow-time-slot {
  padding: .65rem 1.1rem;
  border-radius: 999px;
  background: #f8f4fb;
  color: var(--gris);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background var(--transition-default), color var(--transition-default), transform var(--transition-default);
}
.flow-time-slot:hover { background: #f0e4f5; transform: translateY(-2px); }
.flow-time-slot.selected { background: var(--violeta); color: #fff; }

.flow-time-empty { color: #b3261e; font-weight: 500; margin: .5rem 0 1.25rem; }

.flow-time-actions { display: flex; flex-direction: column; gap: .6rem; }
.flow-time-confirm[disabled] { opacity: .4; pointer-events: none; }
.flow-time-cancel { background: none; border: none; color: #6b7280; font-weight: 600; padding: .4rem; }
.flow-time-cancel:hover { color: var(--gris); }