/* Turnos Saavedra · ajustes sobre Bootstrap 5.3
   Bootstrap aporta casi todo el aspecto; aquí solo va lo que no trae. */

body {
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  padding-bottom: 72px; /* espacio para el menú fijo de abajo */
}

/* Barra superior */
#header { background-color: #212529; color: #fff; padding: 12px 0; position: sticky; top: 0; z-index: 1020; }
#header .navbar-text { color: #adb5bd; }

/* Menú fijo inferior */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 1px solid #ced4da;
  padding: 6px 0; z-index: 1030;
}

/* Contenedor principal con ancho de celular */
#app { max-width: 560px; margin: 0 auto; padding: 16px 12px; }

/* Aviso emergente encima del menú */
.toast-container { z-index: 1080; }

/* Franjas de hora: la ocupada se ve tachada */
.franja:disabled { text-decoration: line-through; }

/* Gráfico de barras hecho con divs */
.barras { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.barra .columna { width: 100%; background: #0d6efd; min-height: 2px; }
.barra.hoy .columna { background: #fd7e14; }
.etiquetas { display: flex; gap: 3px; margin-top: 4px; }
.etiquetas span { flex: 1; font-size: 10px; color: #6c757d; text-align: center; min-width: 0; white-space: nowrap; overflow: visible; }